<template>
  <v-container fluid class="dashboard-container">
    <!-- 顶部关键指标卡片 -->
    <v-row class="mb-4">
      <v-col cols="12" sm="6" md="3" v-for="(item, index) in keyMetrics" :key="index">
        <v-card class="metric-card" elevation="10" :color="item.color">
          <v-card-text class="text-white">
            <div class="d-flex align-center">
              <div class="flex-grow-1">
                <h3 class="text-h4 font-weight-bold">{{ item.value }}</h3>
                <p class="text-subtitle-1 opacity-75">{{ item.title }}</p>
              </div>
              <v-icon size="48" class="opacity-75">{{ item.icon }}</v-icon>
            </div>
            <div class="mt-2">
              <v-chip 
                :color="item.trend > 0 ? 'green' : 'red'" 
                size="small" 
                variant="outlined"
                :prepend-icon="item.trend > 0 ? 'mdi-trending-up' : 'mdi-trending-down'"
              >
                {{ item.trend > 0 ? '+' : '' }}{{ item.trend }}%
              </v-chip>
            </div>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>

    <!-- 图表区域 -->
    <v-row class="mb-4" >
      <!-- 销售趋势图 -->
      <v-col cols="12" lg="8" >
        <v-card elevation="10">
          <v-card-title>
            <v-icon class="mr-2">mdi-chart-line</v-icon>
            销售趋势分析
          </v-card-title>
                     <v-card-text>
             <VueApexCharts
               height="300"
               type="line"
               :options="salesChartOptions"
               :series="salesChartSeries"
             />
           </v-card-text>
        </v-card>
      </v-col>

      <!-- 销售分布饼图 -->
      <v-col cols="12" lg="4" style="height: auto;">
        <v-card elevation="10">
          <v-card-title>
            <v-icon class="mr-2">mdi-chart-pie</v-icon>
            销售分布
          </v-card-title>
                     <v-card-text>
             <VueApexCharts
               height="300"
               type="pie"
               :options="pieChartOptions"
               :series="pieChartSeries"
             />
           </v-card-text>
        </v-card>
      </v-col>
    </v-row>

    <!-- 业务数据表格和其他信息 -->
    <v-row>
      <!-- 最新订单表格 -->
      <v-col cols="12" lg="8">
        <v-card elevation="10">
          <v-card-title>
            <v-icon class="mr-2">mdi-table</v-icon>
            最新订单
            <v-spacer></v-spacer>
            <v-btn color="primary" variant="outlined" size="small">
              查看全部
              <v-icon end>mdi-arrow-right</v-icon>
            </v-btn>
          </v-card-title>
          <v-card-text>
            <v-data-table
              :headers="orderHeaders"
              :items="recentOrders"
              :items-per-page="5"
              hide-default-footer
              class="elevation-10"
            >
              <template v-slot:item.status="{ item }">
                <v-chip
                  :color="getStatusColor(item.status)"
                  size="small"
                  variant="flat"
                >
                  {{ item.status }}
                </v-chip>
              </template>
              <template v-slot:item.amount="{ item }">
                <span class="font-weight-bold">¥{{ item.amount.toLocaleString() }}</span>
              </template>
            </v-data-table>
          </v-card-text>
        </v-card>
      </v-col>

      <!-- 右侧信息卡片 -->
      <v-col cols="12" lg="4">
        <!-- 用户统计 -->
        <v-card elevation="10" class="mb-4">
          <v-card-title>
            <v-icon class="mr-2">mdi-account-group</v-icon>
            用户统计
          </v-card-title>
          <v-card-text>
            <div class="d-flex align-center mb-3">
              <v-avatar color="primary" size="40" class="mr-3">
                <v-icon>mdi-account</v-icon>
              </v-avatar>
              <div>
                <h4>{{ userStats.totalUsers.toLocaleString() }}</h4>
                <p class="text-caption mb-0">总用户数</p>
              </div>
            </div>
            <div class="d-flex align-center mb-3">
              <v-avatar color="success" size="40" class="mr-3">
                <v-icon>mdi-account-check</v-icon>
              </v-avatar>
              <div>
                <h4>{{ userStats.activeUsers.toLocaleString() }}</h4>
                <p class="text-caption mb-0">活跃用户</p>
              </div>
            </div>
            <div class="d-flex align-center">
              <v-avatar color="info" size="40" class="mr-3">
                <v-icon>mdi-account-plus</v-icon>
              </v-avatar>
              <div>
                <h4>+{{ userStats.newUsers }}</h4>
                <p class="text-caption mb-0">今日新增</p>
              </div>
            </div>
          </v-card-text>
        </v-card>

        <!-- 快速操作 -->
        <v-card elevation="10">
          <v-card-title>
            <v-icon class="mr-2">mdi-lightning-bolt</v-icon>
            快速操作
          </v-card-title>
          <v-card-text>
            <v-list>
              <v-list-item
                v-for="(action, index) in quickActions"
                :key="index"
                @click="handleQuickAction(action)"
                :prepend-icon="action.icon"
                :title="action.title"
                :subtitle="action.subtitle"
                class="mb-2"
              >
                <template v-slot:append>
                  <v-icon>mdi-chevron-right</v-icon>
                </template>
              </v-list-item>
            </v-list>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>

    <!-- 系统通知 -->
    <v-row class="mt-4">
      <v-col cols="12">
        <v-card elevation="10">
          <v-card-title>
            <v-icon class="mr-2">mdi-bell</v-icon>
            系统通知
          </v-card-title>
          <v-card-text>
            <v-timeline align="start" density="compact">
              <v-timeline-item
                v-for="(notice, index) in systemNotices"
                :key="index"
                :dot-color="notice.color"
                size="small"
              >
                <template v-slot:opposite>
                  <span class="text-caption">{{ notice.time }}</span>
                </template>
                <div>
                  <h6 class="text-subtitle-2">{{ notice.title }}</h6>
                  <p class="text-body-2 mb-0">{{ notice.content }}</p>
                </div>
              </v-timeline-item>
            </v-timeline>
          </v-card-text>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import VueApexCharts from 'vue3-apexcharts';

// 关键业务指标数据
const keyMetrics = ref([
  {
    title: '总销售额',
    value: '¥2,845,520',
    trend: 12.5,
    color: 'primary',
    icon: 'mdi-currency-usd'
  },
  {
    title: '总订单数',
    value: '8,956',
    trend: 8.2,
    color: 'success',
    icon: 'mdi-cart'
  },
  {
    title: '新用户数',
    value: '1,234',
    trend: -2.1,
    color: 'info',
    icon: 'mdi-account-plus'
  },
  {
    title: '转化率',
    value: '23.8%',
    trend: 4.3,
    color: 'warning',
    icon: 'mdi-chart-line'
  }
]);

// 用户统计数据
const userStats = ref({
  totalUsers: 45672,
  activeUsers: 23456,
  newUsers: 156
});

// 订单表格表头
const orderHeaders = ref([
  { title: '订单号', key: 'orderNo', sortable: false },
  { title: '客户名称', key: 'customerName', sortable: false },
  { title: '金额', key: 'amount', sortable: false },
  { title: '状态', key: 'status', sortable: false },
  { title: '创建时间', key: 'createTime', sortable: false }
]);

// 最新订单数据
const recentOrders = ref([
  {
    orderNo: 'ORD-2024-001',
    customerName: '张三',
    amount: 15800,
    status: '已完成',
    createTime: '2024-01-15 10:30'
  },
  {
    orderNo: 'ORD-2024-002',
    customerName: '李四',
    amount: 8900,
    status: '处理中',
    createTime: '2024-01-15 09:15'
  },
  {
    orderNo: 'ORD-2024-003',
    customerName: '王五',
    amount: 25600,
    status: '待支付',
    createTime: '2024-01-15 08:45'
  },
  {
    orderNo: 'ORD-2024-004',
    customerName: '赵六',
    amount: 12300,
    status: '已完成',
    createTime: '2024-01-14 16:20'
  },
  {
    orderNo: 'ORD-2024-005',
    customerName: '钱七',
    amount: 7500,
    status: '已取消',
    createTime: '2024-01-14 14:10'
  }
]);

// 快速操作数据
const quickActions = ref([
  {
    title: '添加用户',
    subtitle: '创建新的系统用户',
    icon: 'mdi-account-plus',
    action: 'addUser'
  },
  {
    title: '系统设置',
    subtitle: '配置系统参数',
    icon: 'mdi-cog',
    action: 'settings'
  },
  {
    title: '数据备份',
    subtitle: '备份重要数据',
    icon: 'mdi-backup-restore',
    action: 'backup'
  },
  {
    title: '查看日志',
    subtitle: '系统操作日志',
    icon: 'mdi-file-document',
    action: 'logs'
  }
]);

// 系统通知数据
const systemNotices = ref([
  {
    title: '系统更新',
    content: '系统已成功更新至版本 v2.1.0',
    time: '2小时前',
    color: 'primary'
  },
  {
    title: '新用户注册',
    content: '今日新增用户 156 人',
    time: '4小时前',
    color: 'success'
  },
  {
    title: '服务器维护',
    content: '定期维护已完成，系统运行正常',
    time: '1天前',
    color: 'info'
  },
  {
    title: '安全提醒',
    content: '检测到异常登录尝试，已自动拦截',
    time: '2天前',
    color: 'warning'
  }
]);

// 销售趋势图配置
const salesChartOptions = ref({
  chart: {
    id: 'sales-trend',
    toolbar: {
      show: false
    },
    zoom: {
      enabled: false
    }
  },
  xaxis: {
    categories: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
  },
  yaxis: [
    {
      title: {
        text: '销售额(万元)'
      },
      seriesName: '销售额',
    },
    {
      opposite: true,
      title: {
        text: '订单数'
      },
      seriesName: '订单数',
    }
  ],
  stroke: {
    curve: 'smooth',
    width: 2
  },
  fill: {
    type: 'gradient',
    gradient: {
      shadeIntensity: 1,
      opacityFrom: 0.7,
      opacityTo: 0.1
    }
  },
  colors: ['#1976D2', '#4CAF50'],
  tooltip: {
    shared: true,
    intersect: false
  },
  legend: {
    position: 'top'
  }
});

const salesChartSeries = ref([
  {
    name: '销售额',
    type: 'area',
    data: [120, 132, 101, 134, 90, 230, 210, 182, 191, 234, 290, 330]
  },
  {
    name: '订单数',
    type: 'line',
    data: [220, 182, 191, 234, 290, 330, 310, 201, 154, 190, 330, 410]
  }
]);

// 饼图配置
const pieChartOptions = ref({
  chart: {
    type: 'pie'
  },
  labels: ['线上销售', '线下销售', '代理销售', '批发销售'],
  colors: ['#1976D2', '#4CAF50', '#FF9800', '#F44336'],
  legend: {
    position: 'bottom'
  },
  tooltip: {
    y: {
      formatter: (val: number) => val + '万元'
    }
  },
  responsive: [
    {
      breakpoint: 480,
      options: {
        chart: {
          width: 200
        },
        legend: {
          position: 'bottom'
        }
      }
    }
  ]
});

const pieChartSeries = ref([335, 310, 234, 135]);

// 获取状态颜色
const getStatusColor = (status: string) => {
  const colorMap: { [key: string]: string } = {
    '已完成': 'success',
    '处理中': 'warning',
    '待支付': 'info',
    '已取消': 'error'
  };
  return colorMap[status] || 'default';
};

// 处理快速操作
const handleQuickAction = (action: any) => {
  console.log('快速操作:', action.title);
  // 这里可以添加具体的操作逻辑
};
</script>

<style scoped>
.dashboard-container {

  min-height: 100vh;
}

.metric-card {
  transition: transform 0.3s ease;
}

.metric-card:hover {
  transform: translateY(-4px);
}

.v-theme--dark .dashboard-container {
  background-color: #121212;
}
</style>


  